<template>
  <ElDrawer v-model="visible" size="60%">
    <ElForm inline :model="queryCondition" ref="form">
      <ElFormItem label="物品名称" prop="lableLike">
        <ElInput v-model="queryCondition.lableLike"></ElInput>
      </ElFormItem>
      <ElFormItem>
        <ElButton icon="Search" @click="queryByCondition(1)" type="primary"></ElButton>
      </ElFormItem>
    </ElForm>
    <ElTable ref="table" :data="results" @selection-change="(rows:any) => selected=rows">
      <ElTableColumn type="selection" width="64" />
      <ElTableColumn prop="materialCode" label="物品编号"></ElTableColumn>
      <ElTableColumn prop="materialLable" label="物品名称"></ElTableColumn>
      <ElTableColumn prop="suggestPrice" label="建议价格"></ElTableColumn>
      <ElTableColumn prop="materialType" label="类别"></ElTableColumn>
    </ElTable>
    <ElPagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="queryCondition.pageSize"
      :current-page="queryCondition.pageNum"
      @current-change="queryByCondition"
    />
    <ElButton @click="addItems()">添加商品</ElButton>
    <ElButton @click="addItemsEx()" type="primary">添加商品并关闭</ElButton>
  </ElDrawer>
</template>
<script lang="ts">
/**
 * 页面核心数据结构体说明文档
 *    {
      "materialCode": "MT16848092317770038",
      "materialLable": "500ml烧杯",
      "suggestPrice": 5.05,
      "materialType": "tool"
    },
 *
 */
// import from

export default defineComponent({
  name: 'PracThreeSupport',
  emits: ['postSelected'],
  props: {
    sampleP: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      sampleD: 'value',
      visible: false,
      queryCondition: {
        lableLike: '',
        materialTypes: [],
        pageNum: 1,
        pageSize: 6
      },
      total: 0,
      results: [],
      selected: []
    }
  },
  computed: {
    /* sampleC() {
      return this.sampleD + "--";
    }, */
  },
  created() {},
  mounted() {
    this.queryByCondition(1)
  },
  methods: {
    // sampleM() {},
    show() {
      this.visible = true
    },
    async queryByCondition(pageNum?: number) {
      if (pageNum) {
        this.queryCondition.pageNum = pageNum
      }
      const res = await axios({
        method: 'post',
        url: '/material/query',
        data: this.queryCondition
      })
      this.total = res.data.total
      this.results = res.data.results
    },
    reset() {
      const form: any = this.$refs.form
      form.resetFields()
    },
    addItems() {
      this.$emit('postSelected', this.selected)
    },
    async addItemsEx() {
      console.log('将要添加的项目', this.selected)
      this.$emit('postSelected', this.selected)

      //   打扫战场
      const table: any = this.$refs.table
      table.clearSelection()
      this.reset()
      this.visible = false
      await this.queryByCondition(1)
    }
  },
  watch: {
    // sampleP(n, o) {},
    selected(n, o) {
      console.log('调试', this.selected)
    }
  }
})
</script>

<!--<style scoped>-->
<style lang="scss" scoped></style>
